<template>
  <div class="product-detail">
    <el-row>
      <!-- 图片区域 -->
      <el-col :span="12" style="text-align: center;">
        <img :src="product.medicineImg" style="max-height: 450px" alt="Product Image"/>
      </el-col>
      <!-- 详情区域1 -->
      <el-col :span="12">
        <el-descriptions :column="1">
          <el-descriptions-item label="药品名称">{{ product.medicineName }}</el-descriptions-item>
          <el-descriptions-item label="药品描述">{{ product.description }}</el-descriptions-item>
          <el-descriptions-item label="主治功能">{{ product.func }}</el-descriptions-item>
          <el-descriptions-item label="供应商">
            {{ supplier.supplierName }}
          </el-descriptions-item>
          <el-descriptions-item label="药店">
            <a>
              {{ shop.shopName }}
            </a>
          </el-descriptions-item>
          <el-descriptions-item label="用法用量">{{ product.useInstruction }}</el-descriptions-item>
          <el-descriptions-item label="不良反应">{{ product.adverseReactions }}</el-descriptions-item>
          <el-descriptions-item label="禁忌">{{ product.taboo }}</el-descriptions-item>
          <el-descriptions-item label="药物相互作用">{{ product.interact }}</el-descriptions-item>
          <el-descriptions-item label="存储方式">{{ product.storage }}</el-descriptions-item>
          <el-descriptions-item label="成分">{{ product.component }}</el-descriptions-item>
          <el-descriptions-item label="数量">
            <div class="quantity-section">
              <el-input-number v-model="quantity" :max="product.stockQuantity" :min="1"></el-input-number>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-row>
      <!-- 详情区域2 -->
      <el-col :span="12">
        <div class="stock-section">
          <span class="stock-label">库存：</span>
          <span class="stock-value">{{ product.stockQuantity }}</span>
        </div>
      </el-col>
      <el-col :span="12" style="display: flex;flex-direction: row;justify-content: space-around;">
        <!-- 价格信息 -->
        <div class="price-section">
          <span class="points-label">价格：</span>
          <span class="price-label">¥</span>
          <span class="price-value">{{ product.price }}</span>
        </div>

        <!-- 积分信息 -->
        <div class="price-section">
          <span class="points-label">积分值：</span>
          <span class="points-value">{{ product.point }}</span>
        </div>

        <!-- 数量选择器 -->

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="addToCart" style="margin-top: 20px; width: 120px">加入购物车</el-button>
        <el-button type="primary"  @click="goBack()" style="margin-top: 20px;width: 120px">返回</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {useRoute} from 'vue-router';
import {getMedicineDetail} from "@/api/drug";
import router from "@/router";
import {addCart} from "@/api/shopCart";
import { ElMessage } from 'element-plus';
const route = useRoute();

const productId = route.query.medicineId;

const product = ref({});
const shop = ref({});
const supplier = ref({});
const quantity = ref(1); // 添加数量选择器的数据属性

onMounted(() => {
  console.log('productId', productId);
  getMedicineDetail(productId).then((res) => {
    console.log(res.data)
    product.value = res.data.data;
    shop.value = res.data.data.shop;
    supplier.value = res.data.data.supplier;
  })
});

const addToCart = async () => {
  // 添加到购物车的逻辑
  console.log('添加到购物车:', product.value);
   // 将数量作为参数传递给API
  if (!quantity.value || quantity.value <= 0 || quantity.value > product.value.stockQuantity){
    ElMessage.error('请输入正确的数量');
    return;
  }
  await addCart({
    medicineId: product.value.medicineId,
    medicineCount: quantity.value
  }).then((res) => {
    console.log(res.data)
    ElMessage.success('添加成功');
  })
};

const goBack = () => {
  router.go(-1);
};
</script>

<style scoped>
.product-detail {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.product-image img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  margin-right: 20px;
}

.product-info {
  flex: 1;
}

.product-info h2 {
  margin: 0 0 10px 0;
}

.product-info p {
  margin: 5px 0;
}

.product-info p:last-child {
  font-weight: bold;
  color: #ff4d4f;
}

.product-price, .product-point, .product-storage {
  font-size: 16px;
  margin-top: 10px;
}

.el-button {
  margin-top: 20px;
}

.price-info {
  display: flex;
  align-items: center;
}

.product-image {
  width: 200px;
  height: 200px;
  margin-right: 20px;
}

.product-details {
  flex: 1;
}

.product-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.price-section {
  font-size: 24px;
  color: #ff5722;
  margin-bottom: 10px;
}

.price-label {
  font-size: 18px;
}

.points-section, .stock-section {
  font-size: 14px;
  margin-bottom: 10px;
}

.points-label, .stock-label {
  font-weight: bold;
}

.quantity-section {
  font-size: 14px;
  margin-bottom: 10px;
}

.quantity-label {
  font-weight: bold;
}
</style>